import React, { useState, useEffect, useRef } from 'react';
import { withRouter } from 'react-router-dom';
import queryString from 'query-string';
import style from './index.module.less';
import Publish from './components/publish/index';
import Acknowledgments from './components/acknowledgments/index';
import Favorable from './components/favorable/index';

const PublishCase = (props: any) => {
    const [pageType, setPageType] = useState<any>(queryString.parse(props.location.search).type);
    useEffect(() => {
        setPageType(queryString.parse(props.location.search).type);
    }, [props]);
    useEffect(() => {
        // 这里可以执行你需要进行的操作
        if (pageType === '2') {
            // 致谢案例
            setTabActive('2');
        } else if (pageType === '3') {
            // 客户好评
            setTabActive('3');
        }
    }, [pageType]);

    const [tabActive, setTabActive] = useState('2');
    function handleTab(type: string) {
        setTabActive(type);
        setPageType(type);
    }
    return (
        <>
            <div className={style.publish_header}>
                {/* <div className={style.mask} /> */}
                {/* <span>用户好评</span> */}
            </div>
            {/* <ul className={style.tabs_body}>
      <li className={tabActive === "1" ? style.active : ''} onClick={() => handleTab("1")}>发表案例</li>
      <li className={tabActive === "2" ? style.active : ''} onClick={() => handleTab("2")}>致谢案例</li>
      <li className={tabActive === "3" ? style.active : ''} onClick={() => handleTab("3")}>客户好评</li>
    </ul> */}
            {/* <div className={`${tabActive === 1 ? style.show : ''} ${style.content}`}>
      <Publish />
    </div>
    <div className={`${tabActive === 2 ? style.show : ''} ${style.content}`}>
      <Acknowledgments />
    </div>
    <div className={`${tabActive === 3 ? style.show : ''} ${style.content}`}>
      <Favorable />
    </div> */}
            <div className={style.publish_title}>
                <div className={`h2 strong ${style.blue}`}>
                    有关心、有关注、有观点&nbsp;&nbsp;有服务、有耐心、有热忱
                </div>
                <div className="h3 strong">万方寰宇 期待成为您的同路人</div>
            </div>
            {tabActive === '2' && <Acknowledgments />}
            {tabActive === '3' && <Favorable />}
        </>
    );
};

export default withRouter(PublishCase);
